<template>
  <div>
    <el-row style="padding-top: 50px">
      <el-col :span="10" :offset="1">
        <img :src="baseURL+'/file/download?filename='+province.cn_name+'.png'"
             style="padding-top:40px;width:100%;"/></el-col>
      <el-col :span="11" :offset="1" style="text-align: center">
        <!-- 右边链接展示 -->
        <div class="intro">
          <p>热门艺术:{{ images[currentImageIndex].alt }}</p>
        </div>
        <div class="carousel" @click="toArtDetail(images[currentImageIndex])">
          <!-- 轮播图部分 -->
          <img style="width: 675px;height: 360px;border-radius: 10px"
               v-for="(image, index) in images"
               :key="index"
               :src="image.img"
               :alt="currentName=image.name"
               :class="{ active: index === currentImageIndex }"
          />
        </div>
        <div class="intro">
          <p>热门体验店</p>
        </div>
        <div class="links">
          <el-table :data="detail.listStore" @row-click="rowClick"
                    height="400" style="width: 100%;color: black;font-size: 20px" size="large">
            <el-table-column prop="store" label="项目名称"/>
            <el-table-column prop="name" label="体验店"/>
            <el-table-column prop="location" label="地址"/>
          </el-table>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import router from "@/router";
import {useRoute} from "vue-router";
import {getRegionalCultureApi} from "@/api/district";
import {getArtAPi, getStoreAPi} from "@/api/art";
import {baseURL} from "@/api/request";

const images = ref([{alt: '', id: 0}] as any);
const detail = reactive({
  listStore: [],
  listArt: [],
  map: ""
})


function rowClick(row: any, column: any, event: Event) {
  router.push({path: '/storeDetail', query: row});
}

const currentImageIndex = ref(0);
const currentName = ref("321");

const showImage = (index: number) => {
  currentImageIndex.value = index;
};

const nextImage = () => {
  currentImageIndex.value = (currentImageIndex.value + 1) % images.value.length;
};

function toArtDetail(id: any) {
  router.push({path: '/artDetail', query: id});
}

const province = reactive({name: "" as any, cn_name: "" as any})

const route = useRoute();

function getData() {
  console.log(province)
  getArtAPi({sheng: province.cn_name}).then((res) => {
    console.log(res)
    detail.listArt = res.data
    res.data.forEach((item: any) => {
      images.value.push({
        img: baseURL+`/file/download?filename=` + item.index + `.jpeg`,
        alt: item.name,
        id: item.id,
        sheng: item.sheng,
      })
    })
  })

  getStoreAPi({sheng: province.cn_name}).then((res) => {
    console.log(res)
    detail.listStore = res.data
  })
}

onMounted(() => {
  province.cn_name = route.query.provinceCN;
  province.name = route.query.province;
  setInterval(nextImage, 3000);
  getData()
})

</script>

<style scoped>
.carousel img {
  display: none;
  transition: opacity 0.5s ease-in-out;
}

.carousel img.active {
  display: block;
}

.intro {
  text-align: left;
  margin-bottom: 15px;
  margin-top: 15px;
  font-family: 华文楷体, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 23px;
  line-height: 1;
  color: brown;
}

.links {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
  overflow-y: auto;
}



.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 370px;
}

.carousel img {
  width: 100%;
  height: auto;
  position: absolute;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.carousel img.active {
  opacity: 1;
}

.intro {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}
</style>
